{% extends 'base.html' %}
{% load static %}

{% block title %}
{{ article.title }}-西湖歌舞几时休
{% endblock %}

{% block meta %}
    <meta name="description" content="{{ article.description }} {{ article.content }}">
    <meta name="keywords" content="{{ article.title }}">
    <meta name="cdn-baidu-search" content='{"autorun":true, "install":true, "keyword": "{{ article.title}}"}'>
{% endblock %}

{% block content %}
    {% block mycss %}
        {{ block.super }}
        <script src="https://cdn.bootcss.com/highlight.js/9.15.8/highlight.min.js"></script>
        <script src="https://cdn.bootcss.com/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>

        <link type="text/css" href="https://cdn.bootcss.com/highlight.js/9.15.8/styles/github.min.css" rel="stylesheet">
        <link href="{% static 'css-theme/' %}{{ THEME }}{{ '/article/m.css' }}"  rel="stylesheet">
        <link href="{% static 'css-theme/' %}{{ THEME }}{{ '/article/detail.css' }}"  rel="stylesheet">
        <link href="{% static 'css-theme/' %}{{ THEME }}{{ '/article/code.css' }}"  rel="stylesheet">

        <style>
            /* for block of numbers */
            .hljs-ln-numbers {
              -webkit-touch-callout: none;
              -webkit-user-select: none;
              -khtml-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;

              text-align: center;
              color: #ccc;
              border-right: 1px solid #CCC;
              vertical-align: top;
              padding-right: 5px;
            }

            .hljs-ln-n {
              width: 30px;
            }

            /* for block of code */
            .hljs-ln .hljs-ln-code {
              padding-left: 10px;
              white-space: pre;
            }
        </style>
    {% endblock %}

    <article>
        <div class="infos" id="article_content">
            <div>
                <span class="intitle">
                    <a class="location">您现在的位置是：</a>
                    <a class="location" href="/">网站首页</a>
                    <a class="location" href="/articles/mindsay">&gt;&nbsp;碎言碎语</a>&nbsp
                </span>

                <div>
                    <h1 class="news_title" style="text-align: center">{{ article.title }}</h1>
                </div>
                <div class="news_author" style="text-align: center">
                    <span class="au02">{{ article.date }}</span>
                </div>
                <br>

                <div class="news_infos">
                    {{ article.content | safe }}
                </div>

                <script>
                    hljs.initHighlightingOnLoad();
                    hljs.initLineNumbersOnLoad();
                </script>
            </div>

            <div class="nextinfo">
                <p>上一篇：
                    <a href="{% url 'articles:program:detail' %}{{ article_pre.article_id }}.html">{{ article_pre.title }}</a>
                </p>
                <p>下一篇：
                    <a href="{% url 'articles:program:detail' %}{{ article_next.article_id }}.html">{{ article_next.title }}</a>
                </p>
            </div>

            <div style="margin-top:30px; border-top: #000 2px solid;">
                 <form action="/comment/commit" method="POST" enctype="multipart/form-data">
                     {% csrf_token %}
                     <div style="padding-bottom: 30px"></div>
                     {% include "comment.html" %}
                     <input type="submit" style="width:80px; height:30px; margin-top: 10px;" value="发表评论"/>
                     <input name="title" type="text" value="{{ article.title }}" style="float:right; visibility: hidden">
                </form>
            </div>
        </div>
        {% include "comment_list.html" %}
        <script>
            list_comments("{{ article.title }}", "{{ user.id }}");
        </script>
        <br><br>
    </article>

    <script>
        $("document").ready(function(){
            var img=$("article img");
            for(var i = 0;i < img.length; i++){
                var id = img.get(i).id;
                if (id.length > 0){
                    set_image(id, id, false);
                }
            }
        })
    </script>
{% endblock %}




